<template>
	<div class="redio">
		<header>
			<svg-icon iconClass="back" class="icons" @click="Goback"></svg-icon>
			<div class="input">
				<button>姜姗姗</button>
				<p>
					<span>在线人数</span>
					<span>4965 观看</span>
				</p>
				<button class="two-button">关注</button>
			</div>
			<div class="btn">
				<img src="../../assets/images/banner-1.png" alt="" />
				<img src="../../assets/images/banner-1.png" alt="" />
				<img src="../../assets/images/banner-1.png" alt="" />
			</div>
			<svg-icon iconClass="fen" class="icons" @click="Goback"></svg-icon>
		</header>
		<main>
			1
			<div class="tallBox">
				公告:欢迎来到艾克时多合算撒来看管那
				欢迎来到艾克时多合算撒来看管那么多
				欢迎来到艾克时多合算撒来看管那么多
				欢迎来到艾克时多合算撒来看管那么多
				欢迎来到艾克时多合算撒来看管那么多
				欢迎来到艾克时多合算撒来看管那么多
			</div>
		</main>
		<footer>
			<input type="text" placeholder="跟主播聊点什么..." />
			<!-- <button @click="clickBtn" class="submit">
				<svg-icon iconClass="goback"></svg-icon>
			</button> -->
			<div class="right">
				<van-cell @click="showPopup" style="background:#000">
					<img
						src="../../assets/images/right-2.png"
						alt=""
						class="img"
						@click="showPopup"
					/>
				</van-cell>
				<van-popup
					v-model="show"
					round
					position="bottom"
					:style="{ height: '70%' }"
				>
					<div class="heads">
						<span>全部商品</span>
						<span @click="close">返回</span>
					</div>
					<dl
						v-for="(item, index) in data"
						:key="index"
						class="lists"
					>
						<dt>
							<img :src="item.url" alt="" />
						</dt>
						<dd>
							<p>{{ item.title }}</p>
							<p>已售{{ item.num }}+件</p>
							<p>
								<span>¥45</span>
								<button>加入购物车</button>
								<button>立即购买</button>
							</p>
						</dd>
					</dl>
				</van-popup>
			</div>

			<div class="shopBox">
				<div class="head">
					<span>刚刚看过</span>
					<span @click="showPopup">X</span>
				</div>
				<div class="main">
					<dl>
						<dt>
							<img src="../../assets/images/list-2.png" alt="" />
						</dt>
						<dd>
							<p>衬衫女设计 感小众2021春装新款法式V...</p>
							<p>
								<b>
									¥45
								</b>
								<span>立即购买</span>
							</p>
						</dd>
					</dl>
				</div>
			</div>
		</footer>
	</div>
</template>

<script>
import Vue from "vue";
import { Popup } from "vant";
import SvgIcon from "../../components/SvgIcon.vue";

Vue.use(Popup);
export default {
	components: { SvgIcon },
	data() {
		return {
			show: false,
			data: [],
		};
	},
	methods: {
		Goback() {
			this.$router.push("/streaming");
		},
		showPopup() {
			this.show = true;
		},
		close() {
			this.show = false;
		},
		// clickBtn() {
		// 	this.contentList.push(this.input);
		// 	this.input = "";
		// 	this.$nextTick(() => {
		// 		this.$refs.getBoxHeight.scrollTo(
		// 			0,
		// 			this.$refs.getBoxHeight.scrollHeight
		// 		);
		// 	});
		// },
	},
	created() {
		this.$api.showsList().then((res) => {
			console.log(res);
			this.data = res.list;
		});
	},
};
</script>

<style lang="scss" scoped>
@import "@css/style.scss";
.redio {
	font-size: px2rem(18);
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
}
header {
	height: px2rem(50);
	display: flex;
	background: #000;
	color: #fff;
	align-items: center;
	justify-content: space-between;
	font-weight: bold;
	padding: 0 10px;
}
.btn {
	display: flex;
	align-items: center;
	img {
		border: 0;
		width: 40px;
		height: 40px;
		margin-left: -12px;
		border-radius: 50%;
	}
}
.input {
	border: 2px solid #fff;
	display: flex;
	border-radius: 40px;
	width: 180px;
	font-size: 12px;
	align-items: center;
	p {
		text-align: left;
		margin: 0 11px;
		span {
			display: block;
		}
	}
	> button {
		width: 50px;
		height: 50px;
		border: 0;
		border-radius: 50%;
		background: orangered;
	}
}
.two-button {
	width: 60px;
	height: 50px;
}
main {
	flex: 1;
	background: #ccc;
}
.tallBox {
	width: 290px;
	height: 150px;
	background: rgba(0, 0, 0, 0.2);
	position: fixed;
	left: px2rem(20);
	bottom: 80px;
	border-radius: 15px;
	font-size: px2rem(15);
	color: gold;
}
footer {
	height: 90px;
	display: flex;
	align-items: center;
	background: #000;
	input {
		background: #000;
		width: 49%;
		border: 0;
		color: #fff;
		text-indent: px2rem(12);
		font-weight: bold;
	}
}
.right {
	flex: 1;
	width: 100%;
	.img {
		margin-left: px2rem(100);
	}
	dl {
		display: flex;
		// justify-content: space-between;
		align-items: center;
		background: #f5f5f5;
		margin: px2rem(3) 0;
		padding: 0 5px;
		dd {
			font-size: px2rem(14);
			line-height: px2rem(28);
			margin-left: px2rem(8);
			span {
				font-size: px2rem(16);
				color: orangered;
			}
			button {
				padding: px2rem(6) px2rem(12);
				border: 0;
				border-radius: px2rem(13);
				background: orangered;
				color: #fff;
				margin: 0 px2rem(5);
			}
		}
		dt {
			img {
				border-radius: px2rem(12);
			}
		}
		p:nth-child(1) {
			font-weight: bold;
		}
	}
}
.shopBox {
	width: 300px;
	height: 130px;
	background: #fff;
	position: absolute;
	right: 35px;
	bottom: 80px;
	border-radius: 16px;
	.head {
		background: orangered;
		height: 35px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 10px;
		color: #fff;
		border-radius: 11px 11px 0 0;
	}
	.main {
		dl {
			display: flex;
			align-items: center;
		}
		dt {
			img {
				display: block;
				width: 130px;
				height: 80px;
			}
		}
		dd {
			font-size: 14px;
			margin-left: px2rem(8);
			padding: 0 px2rem(4);
			p {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: px2rem(6);
				b {
					font-size: px2rem(18);
					color: orangered;
				}
				span {
					padding: px2rem(8) px2rem(12);
					background: orangered;
					color: #fff;
					border-radius: px2rem(16);
				}
			}
		}
	}
}
.heads {
	display: flex;
	height: 50px;
	align-items: center;
	justify-content: space-between;
	padding: 0 px2rem(10);
}
</style>
